Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[visualizations] Reduce page load bundle to under 100kB #98302

Merged
merged 6 commits into from
May 3, 2021
Merged

[visualizations] Reduce page load bundle to under 100kB #98302

merged 6 commits into from
May 3, 2021

Conversation

alexwizp
Copy link
Contributor

@alexwizp alexwizp commented Apr 26, 2021 •
edited
Loading

Closes: #95874

Summary

The visualizations plugin is currently 92.1KB (goal was already achieved but we decided to optimize it more) To consider #95874 issue closed, the limits.yml should be updated for visualizations with the value under 100KB.

id before after diff
visualizations 92.1KB 55.1KB -37.0KB

What was done it that PR:

  • limits.yml was updated. New limit to 'visualizations' plugin is 90KB
  • VisualizationError, VisualizationNoResults turned into lazy React components.
  • created a new factory for loading VisualizeEmbeddable in async way. We needed it to lazy load scss styles and exclude related code from the main bundle
  • created a new factory for loading Vis in async way. We needed it to lazy load scss styles and exclude related code from the main bundle

@alexwizp
Copy link
Contributor Author

@elasticmachine merge upstream

@elastic elastic deleted a comment from kibanamachine Apr 27, 2021
dimaanj
dimaanj approved these changes Apr 28, 2021
View reviewed changes
Copy link
Contributor

@dimaanj dimaanj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

VladLasitsa
VladLasitsa approved these changes Apr 28, 2021
View reviewed changes
Copy link
Contributor

@VladLasitsa VladLasitsa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@stratoula stratoula marked this pull request as ready for review April 29, 2021 06:14
@stratoula stratoula requested a review from a team April 29, 2021 06:14
@stratoula stratoula requested review from a team as code owners April 29, 2021 06:14
@stratoula stratoula added release_note:skip Skip the PR/issue when compiling release notes Feature:Visualizations Generic visualization features (in case no more specific feature label is available) Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.14.0 v8.0.0 labels Apr 29, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-app (Team:KibanaApp)

@stratoula
Copy link
Contributor

@elasticmachine merge upstream

stratoula
stratoula approved these changes Apr 29, 2021
View reviewed changes
Copy link
Contributor

@stratoula stratoula left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, I did various tests locally on almost all our visualizations. It seems that it works fine and is a great enhancement. Thank you Alex!

@timroes
Copy link
Contributor

timroes commented Apr 29, 2021

@elasticmachine run elasticsearch-ci/docs

tylersmalley
tylersmalley approved these changes Apr 29, 2021
View reviewed changes
Copy link
Contributor

@tylersmalley tylersmalley left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Thanks for reducing the bundle size! Ops limit change LGTM

@alexwizp
Copy link
Contributor Author

ping @elastic/kibana-design

@timroes
Copy link
Contributor

timroes commented Apr 30, 2021

@elastic/kibana-design could someone give this a code owner review, please?

@alexwizp
Copy link
Contributor Author

alexwizp commented May 3, 2021

@elasticmachine merge upstream

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
visualizations 94 104 +10

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
visualizations 45.3KB 101.1KB +55.8KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id before after diff
visualizations 5 6 +1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
visualizations 92.1KB 55.1KB -37.0KB
Unknown metric groups

async chunk count

id before after diff
visualizations 1 7 +6

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@timroes
Copy link
Contributor

timroes commented May 3, 2021

@elasticmachine run elasticsearch-ci/docs

@alexwizp alexwizp merged commit 582e636 into elastic:master May 3, 2021
@alexwizp alexwizp mentioned this pull request May 3, 2021
Merged
alexwizp added a commit to alexwizp/kibana that referenced this pull request May 3, 2021
@alexwizp
[visualizations] Reduce page load bundle to under 100kB (elastic#98302)
9eb4404 
* [visualizations] Reduce page load bundle to under 100kB

* move scss to async chunks

* fix CI

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
# Conflicts:
#	packages/kbn-optimizer/limits.yml
alexwizp added a commit that referenced this pull request May 3, 2021
@alexwizp
[visualizations] Reduce page load bundle to under 100kB (#98302) (#99028
e70e0df 
)

* [visualizations] Reduce page load bundle to under 100kB

* move scss to async chunks

* fix CI

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
# Conflicts:
#	packages/kbn-optimizer/limits.yml
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dimaanj dimaanj dimaanj approved these changes

@stratoula stratoula stratoula approved these changes

@VladLasitsa VladLasitsa VladLasitsa approved these changes

@ryankeairns ryankeairns ryankeairns approved these changes

@tylersmalley tylersmalley tylersmalley approved these changes

Assignees
No one assigned
Labels
Feature:Visualizations Generic visualization features (in case no more specific feature label is available) release_note:skip Skip the PR/issue when compiling release notes Team:Visualizations Visualization editors, elastic-charts and infrastructure v7.14.0 v8.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[visualizations] Reduce page load bundle to under 100kB
9 participants
@alexwizp @elasticmachine @stratoula @timroes @kibanamachine @tylersmalley @ryankeairns @VladLasitsa @dimaanj